<div style="margin-top:15px;" v-if="status">

  <!-- 图标 -->
  <a-alert v-if="!status.connect"
    message="警告"
    description="屏幕掉线啦！！！"
    type="warning"
    showIcon
  ></a-alert>

  <template>
    <a-form :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
      <a-form-item key="first+" style="margin-bottom: 1px;">
        <a-button type="dashed" style="width: 15%" @click="btnAdd(0)">
          开头添加
        </a-button>
      </a-form-item>

      <a-form-item
        v-for="(path,index) in paths"
        :key="path.id"
        style="margin-bottom: 1px;">
        <a-input-group compact style="width: 15%; vertical-align: top; margin-right: 30px; top: 4px;">
          <a-cascader
            v-model:value="path.cmd"
            :options="cmds"
            placeholder="选择命令"
            @change="btnTypeChange(path,index)"
          ></a-cascader>
        </a-input-group>

        <div v-if="path.cmd[0] === 'Frag'" style="width: 70%; display: inline-block;">
          <a-button type="dashed" style="width: 85%" @click="btnFragInsert(index)">
            插入片段
          </a-button>
        </div>
        <div v-else-if="path.cmd.length!=2" style="width: 70%; display: inline-block;">
        </div>
        <div
          v-else-if="path.cmd[0] === 'M' || path.cmd[1] === 'L' || path.cmd[1] === 'l' || path.cmd[1] === 'T' || path.cmd[1] === 't'"
          style="width: 70%; display: inline-block;">
          <a-input-number v-model:value="path.values[0]" style="width: 40%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[1]" style="width: 40%;" @change="dirty=true"></a-input-number>
        </div>
        <div
          v-else-if="path.cmd[1] === 'H' || path.cmd[1] === 'h'"
          style="width: 70%; display: inline-block;">
          <a-input-number v-model:value="path.values[0]" style="width: 40%;" @change="dirty=true"></a-input-number>
        </div>
        <div
          v-else-if="path.cmd[1] === 'V' || path.cmd[1] === 'v'"
          style="width: 70%; display: inline-block;">
          <div style="display: inline-block; width: 40%;"></div>
          &emsp;
          <a-input-number v-model:value="path.values[0]" style="width: 40%;" @change="dirty=true"></a-input-number>
        </div>
        <div
          v-else-if="path.cmd[1] === 'C' || path.cmd[1] === 'c'"
          style="width: 70%; display: inline-block;">
          <a-input-number v-model:value="path.values[0]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[1]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[2]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[3]" style="width: 20%;" @change="dirty=true"></a-input-number>
          <br/>
          <a-input-number v-model:value="path.values[4]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[5]" style="width: 20%;" @change="dirty=true"></a-input-number>
        </div>
        <div
          v-else-if="path.cmd[1] === 'S' || path.cmd[1] === 's' || path.cmd[1] === 'Q' || path.cmd[1] === 'q'"
          style="width: 70%; display: inline-block;">
          <a-input-number v-model:value="path.values[0]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[1]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[2]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[3]" style="width: 20%;" @change="dirty=true"></a-input-number>
        </div>
        <div
          v-else-if="path.cmd[0] === 'E'"
          style="width: 70%; display: inline-block;">
          <a-input-number v-model:value="path.values[0]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[1]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[2]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-switch v-model:checked="path.values[3]" @change="dirty=true"></a-switch>
          &emsp;
          <a-switch v-model:checked="path.values[4]" @change="dirty=true"></a-switch>
          <br/>
          <a-input-number v-model:value="path.values[5]" style="width: 20%;" @change="dirty=true"></a-input-number>
          &emsp;
          <a-input-number v-model:value="path.values[6]" style="width: 20%;" @change="dirty=true"></a-input-number>
        </div>
        <div
          v-else-if="path.cmd[0] === 'Z'"
          style="width: 70%; display: inline-block;">
        </div>
        <div v-else style="width: 70%; display: inline-block;">
          None
        </div>

        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnAdd(index+1)">
          <a-icon type="plus"></a-icon>
        </a-button>
        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnRemove(index)">
          <a-icon type="minus"></a-icon>
        </a-button>
      </a-form-item>

      <a-form-item key="last+" style="margin-bottom: 1px;">
        <a-button type="dashed" style="width: 15%" @click="btnAdd(paths.length)">
          结尾添加
        </a-button>
      </a-form-item>

      <a-form-item key="commit" style="margin-bottom: 1px; margin-top: 30px;">
        <a-button type="primary" :disabled="!valid" @click="btnCommit()">
          提交
        </a-button>
        &emsp;
        <a-button style="margin-left: 28px;" @click="btnRefresh()">
          刷新
        </a-button>
        &emsp;
        <a-switch v-model:checked="autoCommit" style="margin-left: 28px;"></a-switch>&emsp;自动提交
      </a-form-item>
    </a-form>

    <a-modal
      v-model:visible="fragModalShow"
      title="插入路径"
      width="70%"
    >
      <template #footer>
        <a-button key="submit" type="primary" :disabled="!fragModalPathValid || fragModalText === ''" @click="btnFragModalOk">
          确认
        </a-button>
        <a-button key="back" @click="btnFragModalCancel">
          取消
        </a-button>
      </template>
      <a-textarea
        v-model:trim="fragModalText"
        placeholder="路径片段"
        :auto-size="{ minRows: 3, maxRows: 20 }"
        @change="evtFragModalTextChanged"
        :allowClear="true"
      />
      <br/><br/>
      <a-card :style="(fragModalPathValid || fragModalText === '') ? {} : {'borderColor':'red', 'color':'red'}">
        <pre>{{fragModalPath == '' ? '解析结果在这里' : fragModalPath}}</pre>
      </a-card>
    </a-modal>
  </template>
  <br/>
  <a-card :style="valid ? {} : {'borderColor':'red', 'color':'red'}">
    {{pathText}}
  </a-card>
  dirty = {{dirty}}

</div>
<div v-else>
  空
</div>
